// 多级菜单数据
const menuItems = [
    {
        label: '首页',
        url: '/home'
    },
    {
        label: '关于我们',
        url: '/about'
    },
    {
        label: '服务',
        children: [
            { label: 'Web开发', url: '/services/web' },
            { label: 'UI设计', url: '/services/ui' },
            {
                label: '后端开发',
                children: [
                    { label: 'Node.js', url: '/services/backend/node' },
                    { label: 'Java', url: '/services/backend/java' }
                ]
            }
        ]
    },
    {
        label: '联系我们',
        url: '/contact'
    }
];

// 创建单个菜单项（支持子菜单）
function createMenuItem(item, container) {
    const li = document.createElement('li');
    const a = document.createElement('a');
    a.href = item.url;
    a.textContent = item.label;
    li.appendChild(a);

    // 如果有子菜单，递归创建子菜单 ul
    if (item.children && item.children.length > 0) {
        const subUl = document.createElement('ul');
        item.children.forEach(child => {
            createMenuItem(child, subUl); // 递归调用
        });
        li.appendChild(subUl);
    }

    container.appendChild(li);
}

// 创建整个菜单
function createMenu() {
    const menuContainer = document.getElementById('menu');
    menuItems.forEach(item => {
        createMenuItem(item, menuContainer);
    });
}

// 页面加载完成后执行
document.addEventListener("DOMContentLoaded", function() {
    createMenu();
});